<template>
  <!-- 查询组件 -->
  <div class="_filter_wrapper">
    <div class="_filter_item_wrapper" v-for="item in data" :key="item.propName">
      <div class="_filter_label">{{ item.label + ":" }}</div>
      <a-input
        v-model="filterParams[item.propName]"
        v-if="item.type == 'input'"
        :placeholder="'请输入' + item.label"
        allow-clear
      />
      <a-select
        v-model="filterParams[item.propName]"
        v-if="item.type == 'select'"
        :options="item.selectOptions"
        :placeholder="'请选择' + item.label"
        allow-clear
      />
      <a-date-picker
        v-model="filterParams[item.propName]"
        style="width: 100%"
        v-if="item.type == 'date'"
      />
    </div>
    <div class="_filter_btn_wrapper">
      <div class="_fliter_btn _fliter_btn_search" @click="search">
        <icon-search></icon-search>
        查询
      </div>
      <div class="_fliter_btn _fliter_btn_reset" @click="reset">
        <icon-refresh />
        重置
      </div>
    </div>
  </div>
</template>
<script setup>
import { Message } from "@arco-design/web-vue";
import { ref, defineProps, onMounted, reactive } from "vue";
import request from "../../utils/request";
const emits = defineEmits(["search"]);
const props = defineProps({
  /**
   * @property {Array} data - 过滤数据，成员为Object
   * @property {String} data.label - 标题
   * @property {String} data.propName - 属性名
   * @property {String} data.type - 类型
   * @property {String} data.type/input - 输入框
   * @property {String} data.type/select - 选择框
   * @property {String} data.type/date - 日期
   * @property {String} data.selectOptions - 选择框的选项-当type为select时有效
   */
  data: {
    type: Array,
    default: () => [],
  },
  /**
   * @property {String} url - 请求的接口
   */
  url: {
    type: String,
    default: "",
  },
  /**
   * @property {String} labelPosition - label位置
   * @property {String} labelPosition/left - label位于左边
   * @property {String} labelPosition/top - label位于上边
   */
  labelPosition: {
    type: String,
    default: "left",
  }
});

let filterParams = reactive({});

//查询
async function search() {
  //如果没有设置url，则不进行查询
  if (!props.url) return;
  //如果所有过滤条件都为空，则不进行查询
  // if (Object.keys(filterParams).every((key) => !filterParams[key])) {
  //   Message.warning("请至少输入一个过滤条件");
  //   return;
  // };
  //发送请求
  const data = await request({
    url: props.url,
    method: "POST",
    data: filterParams,
  });
  
  emits("search",data);
}
defineExpose({
  filterParams
})

//重置
function reset() {
  buildParams();
  search();
}

function getParams(){
  props.data.forEach((item) => {
    filterParams[item.propName] = null
    if(item.params){
      filterParams[item.propName] = item.params;
    }
  });
}

//构建查询参数
function buildParams() {
  props.data.forEach((item) => {
    filterParams[item.propName] = null
  });
}

// 如果携带参数，则进行查询
function checkParams(){
  props.data.forEach((item) => {
    if(item.params != null && item.params != undefined){
      search();
    }
  });
}

onMounted(() => {
  if (!props.url) {
    console.warn("请传入url");
  }
  //构建查询参数
  buildParams();
  getParams();
  checkParams();
});
</script>
<style scoped>
._filter_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  place-items: center;
  gap: 10px;
}
._filter_item_wrapper {
  width: 100%;
  height: 30px;
  display: flex;
  gap: 10px;
  box-sizing: border-box;
  align-items: center;
}
._filter_label {
  width: fit-content;
  flex-shrink: 0;
  font-size: 1rem;
}
._filter_btn_wrapper {
  width: 100%;
  display: flex;
  gap: 10px;
}
._fliter_btn {
  width: 100px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
}
._fliter_btn:hover {
  opacity: 0.8;
}
._fliter_btn_search {
  background-color: #5f1fe1;
}
._fliter_btn_reset {
  background-color: #cfcfcf;
}
</style>